<script setup lang="ts">
import { UserOutlined } from '@ant-design/icons-vue';
import {useRequest} from "vue-hooks-plus";
import {postMangeGetLearningTime, postMangeGetUserByUserId, postUserCardGetUserCard} from "@/apis/student";
import {ref} from "vue";
import {message} from "ant-design-vue";
import {map} from "lodash";

// 用户卡片信息
let userName = ref("")
let userIntro = ref("")
let userImage = ref("")
let sex = ref("")
let address = ref("")
let userId = ref("")

// 用户状态信息
let userInfoValue = ref<Array<IOption>>([
  {
    label:'用户名',
    value:'--'
  },
  {
    label:'性别',
    value:'--'
  },
  {
    label:'地址',
    value:'--'
  },
  {
    label:'个人简介',
    value:'--'
  }
])
useRequest(()=> postUserCardGetUserCard(),{
  onSuccess:((res)=> {
    console.log(res)
    // userName.value = res.data.nickname
    userInfoValue.value[0].value = res.data.nickname
    // userIntro.value = res.data.userIntro
    userInfoValue.value[3].value = res.data.userIntro
    userImage.value = res.data.userImg
    // sex.value = res.data.sex
    userInfoValue.value[1].value = res.data.sex
    // address.value = res.data.address
    userInfoValue.value[2].value = res.data.address
    userId.value = res.data.userId
  }),
  onError:(err=>{
    message.error(err.message)
  })
})
// let userDataList = ref<any>(["用户名", "性别", "地址","个人简介"])
// let userData = ref<any>([userName, sex, address, userIntro])
// 根据用户ID获取用户学习信息
let learningTime = ref("")
let learningLV = ref("")
let leaenInfoValue = ref<Array<IOption>>([
  {
    key:'learning-time',
    label:'学习时长',
    value:'--'
  },
  {
    key:'learning-LV',
    label:'学习等级',
    value:'--'
  },
])
let userLearningDataList = ref<any>(["学习时长", "学习等级"])
let userLearningData = ref<any>({})
const { loading } = useRequest(()=> postMangeGetLearningTime(),{
  onSuccess:((res)=>{
    console.log(res.data)
    userLearningData.value = res.data
    leaenInfoValue.value[0].value = res.data[0].learnTime
    leaenInfoValue.value[1].value = res.data[0].learnLv
  })
})

</script>

<template>
  <a-flex class="user-info" justify="center" align="center">
    <div class="ba-area">
      <div class="circular"/>
      <div class="circular"/>
    </div>
    <a-row class="user-info-area" :gutter="16">
      <a-col :span="6" class="area-col">
        <a-avatar
            class="avatar-action"
            :size="{ xs: 24, sm: 32, md: 40, lg: 64, xl: 80, xxl: 100 }"
            style="background-color: #87d068"
            :src="userImage"
        >
          <template #icon>
            <UserOutlined />
          </template>
        </a-avatar>
      </a-col>
      <a-col :span="7" class="area-col">
        <ul>
          <li v-for="item in userInfoValue" :key="item.label" style="margin-top: 0.5em;width: 120%">
            {{item.label}}
          </li>
        </ul>
        <ul>
          <li v-for="item in userInfoValue" :key="item.value" style="margin-top: 0.5em;width: 120%">
            {{ item.value }}
          </li>
        </ul>
      </a-col>
      <a-col :span="11" class="area-col">
        <div v-for="item in leaenInfoValue" :key="item.key">
          <p style="text-align: center">{{item.label}}</p>
          <div class="circular-show">{{ item.value }}</div>
        </div>
      </a-col>
    </a-row>
  </a-flex>
</template>

<style scoped lang="scss">
.user-info{
  position: relative;
  width: 100%;
  height: 21rem;
  padding: 2rem 3rem;
  overflow: hidden;
  &-area{
    width: 90%;
    min-height: 12rem;
    position: absolute;
    border-radius: 1.2rem;
    background: #f2f2f233;
    backdrop-filter: blur(15px);
    .area-col{
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 20px;
    }
  }
}

@mixin animation($alt) {
  /*动画名称*/
  animation-name: up-down;
  /*持续时间*/
  animation-duration: 1s;
  /*延迟时间*/
  animation-delay: 0s;
  /*动画方向*/
  animation-direction: $alt;
  /*播放次数-循环播放*/
  animation-iteration-count: infinite;
}
@mixin circular() {
  position: absolute;
  top: 12%;
  right: 9%;
  width: 10rem;
  height: 10rem;
  background: #ae4646;
  border-radius: 50%;
  z-index: 1;
}
.ba-area{
  position: absolute;
  z-index: 0;
  width: 100%;
  height: 100%;
  left: 0;
  .circular:first-child{
    @include circular;
    right: 1rem;
    @include animation(alternate)
  }
  .circular:nth-child(2){
    @include circular;
    left: 1rem;
    background: rgb(75, 140, 115);
    @include animation(alternate-reverse)
  }
}
@keyframes up-down {
  0% {
    top: 0.2rem;
  }
  20% {
    top: 0.6rem;
  }
  40% {
    top: 1rem;
  }
  50%{
    top: 1.2rem;
  }
  60% {
    top: 1.4rem;
  }
  70% {
    top: 1.6rem;
  }
  80% {
    top: 1.8rem;
  }
  90% {
    top: 3rem;
  }
  100% {
    top: 5rem;
  }
}

.avatar-action{
  box-shadow: 0 0 5px 2px #00244e;
  transition: 0.21s 0s ease-in-out all;
  transform: scale(1);
  &:hover{
    transition: 0.21s 0s ease-in all;
    transform: scale(1.2);
  }
}

.circular-show{
  position: relative;
  border: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 5rem;
  height: 5rem;
  background: #6574ac;
  color: #ffffff;
  border-radius: 50%;
  font-size: 1.2rem;
  font-weight: bold;
}
</style>
